<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.js"></script>
<!--<script src="../js/echarts.min.js"></script>-->
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;

    /**
     * 折线图官网demo
     * https://www.echartsjs.com/examples/en/editor.html?c=line-stack
     */


    let getData = () => {
        //names 员工名称数组
        let names = new Set();

        let series = [];

        // k员工名  v 12个月工资数组
        let myMap = new Map();
        $.get({
            async: false,
            cache: false,
            url: "/api/emp/empline", success: (data) => {

                data.forEach(p => {

                    names.add(p.e_truename);

                    if (myMap.has(p.e_truename)) {
                        // 取出工资数组，
                        let m = myMap.get(p.e_truename);
                        let money = p.money;
                        m[p.month - 1] = !!money ? money / 1000 : 0;
                        myMap.set(p.e_truename, m)
                    } else {
                        // 员工工资数组，初始化为 0
                        const moneys = new Array(12).fill(0);
                        // 一月工资
                        moneys[p.month - 1] = p.money / 1000;
                        myMap.set(p.e_truename, moneys)
                    }
                });
            }
        });


        myMap.forEach((value, key, map) => {
            series.push({
                name: key,
                type: 'line',
                stack: '业绩',
                data: value
            })
        });

        names = Array.from(names);
        let obj = {
            names: names,
            series: series
        };

        console.log(myMap);
        console.log('obj', obj);
        return obj;
    };

    var data = getData();


    option = {
        title: {
            text: '员工个人业绩折线图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: data.names
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
            type: 'value',
            name: '工资',
            min: 0,
            // interval:1,
            axisLabel: {
                formatter: '{value} k'
            }
        },
        series: data.series
    };


    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>